<template>
  <div>
    <Textarea v-model:value="nameInput" v-bind="$attrs" />
    <Button class="mt-2" @click="handleChooseStep">选择步骤</Button>
    <Steps @register="registerModal" @submit="handleSubmit" />
  </div>
</template>
<script lang="ts" setup name="InputTextArea">
  import { Textarea, Button } from 'ant-design-vue';
  import Steps from './Steps.vue';
  import { computed } from 'vue';
  import { useModal } from '/@/components/Modal';

  const emit = defineEmits(['update:data']);
  const props = defineProps({
    data: String,
  });
  const nameInput = computed({
    get() {
      return props.data;
    },
    set(v) {
      emit('update:data', v);
    },
  });
  const [registerModal, { openModal }] = useModal();
  function handleChooseStep() {
    openModal(true, nameInput.value || {});
  }
  function handleSubmit(value) {
    emit('update:data', value.join(';'));
  }
</script>
<style lang="less" scoped></style>
